
.dialog.card.editor-gutenberg-opt-in-dialog {
	padding: 0;
	max-width: 100%;

	@include breakpoint-deprecated( '<660px' ) {
		max-height: 100%;
		height: 100%;
	}

	@include breakpoint-deprecated( '>660px' ) {
		padding: 32px 40px 32px ( 260px + 32px );
		max-width: 800px;
	}

	.dialog__content {
		padding: 0;

		@include breakpoint-deprecated( '<660px' ) {
			padding: 0 24px;
		}

		h1 {
			font-size: $font-title-medium;
			height: auto;
			line-height: 1.2;

			@include breakpoint-deprecated( '>660px' ) {
				font-size: $font-title-large;
			}
		}

		p {
			margin-bottom: 24px;

			&.editor-gutenberg-opt-in-dialog__subhead {
				font-size: $font-title-small;
				color: var( --color-neutral-50 );
			}
		}
	}

	.dialog__action-buttons {
		padding: 0;
		border: none;
		text-align: inherit;

		&::before {
			display: none;
		}

		.button {
			margin: 0 24px 8px;

			@include breakpoint-deprecated( '<660px' ) {
				display: block;
				width: calc( 100% - 24px - 24px );
				padding: 12px;
			}

			@include breakpoint-deprecated( '>660px' ) {
				margin: 0 16px 0 0;
			}
		}
	}
}

.editor-gutenberg-opt-in-dialog__illustration {
	background: var( --color-neutral-0 ) url( '/calypso/images/illustrations/gutenberg.svg' ) no-repeat;
	background-position: 50%;
	background-size: 320px;
	height: 180px;
	width: calc( 100% + 24px + 24px );
	margin: 0 -24px 24px;
	position: relative;

	@include breakpoint-deprecated( '>660px' ) {
		background-position: 40px 43%;
		background-size: 250px;
		height: auto;
		width: 260px;
		margin: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
	}

	&::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 48px;
		background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.1 ) 100% );

		@include breakpoint-deprecated( '>660px' ) {
			top: 0;
			left: auto;
			height: auto;
			width: 48px;
			background: linear-gradient( to right, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.1 ) 100% );
		}
	}
}

.editor-gutenberg-opt-in-dialog__close {
	position: absolute;
	top: 8px;
	right: 8px;
	cursor: pointer;
	color: var( --color-neutral-light );

	&:hover {
		color: var( --color-neutral-70 );
	}
}
